<template>
	<view class="prod">
		<uni-popup ref="popup" type="message" class="tip">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000" class="message"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popupdia" type="dialog">
		    <uni-popup-dialog type="error" mode="base" title="是否删除" content="这可不能后悔" :duration="0" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<view class="BG"></view>
		<searchBar class="search" :searchList="currentSearchVideoList" :searchAnimate="isSearchVideo"
		@chooseBlogForSearch = "chooseBlogForSearch"></searchBar>
		<view class="video" @click="closeVideo" :animation="animateData" v-if="showBlack" 
		style="opacity: 0; transform: scale(0.3);">
		</view>
		<audio class="audio" :author="author" :name="audioTitle" :src="playInfo.prod" v-if="showVideo&&format!=='mp4'" 
		autoplay="true" :poster="playInfo.poster" controls></audio>
		<video :src="playInfo.prod" v-if="showVideo&&format==='mp4'"
		autoplay="true" :poster="playInfo.poster" controls></video>
		<view class="openText" :animation="animateData" style="opacity: 0; transform: scale(0.3);" v-if="showText">
			<text class="realname">{{textInfo.realname}}</text>
			<h1>{{textInfo.title}}</h1>
			<text class="content" v-html="textInfo.render">{{textInfo.render}}</text>
		</view>
		<view class="input">
			<input type="text" v-model="searchVideoContent" placeholder="搜索"
			@focus="searchAllVideo" @blur="cancelSearchAllVideo" @confirm="startSearchVideo"
			@input="changeSearchVideo">
			<text class="cancel" @click="cancel">取消</text>
			<i class="iconfont iconsousuo"></i>
		</view>
		<view v-if="addVideo" class="addVideo" @click="addYourVideo">
			<view class="addVideoText"><text>添加你的作品</text></view>
			<view class="tag">></view>
		</view>
		<view class="contain">
			<view v-for="item,index in pagenationContent" :key="item.id">
				<prodItem :poster="item.poster"
				:prod="item.prod"
				:realname="item.realname"
				:time="item.time"
				:title="item.title"
				:way="item.way"
				:username="item.username"
				:id="item.id"
				:render="item.render"
				:text="item.text"
				:format="item.format"
				@playVideo="playVideo"
				@readText="readText"
				></prodItem>
			</view>
		</view>
		<view class="pagenation" v-if="allPageSize>pageSize">
			<uni-pagination show-icon="true" :total="allPageSize" :current="currentPageNum" 
			:pageSize="pageSize" @change="changePagenation"></uni-pagination>
		</view>
		<addProd v-if="addVideo&&openAddProd" ref="addProd" :origin="origin"
		@disappealAddProd="disappealAddProd" @againGetProdList="againGetProdList"
		@readyDelProd="readyDelProd"></addProd>
	</view>
</template>

<script>
	import prodItem from "./prodItem.vue"
	import searchBar from "../../components/searchBar/search.vue"
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import animate from "../../animate.js"
	import addProd from "../../components/addProd/addProd.vue"
	export default{
		components:{
			prodItem,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniPagination,
			searchBar,
			addProd
		},
		mixins:[animate.mixin],
		created() {
			this.getAllVideoList()
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.reLaunch({
					url:"/pages/prod/prod"
				})
			},500)
		},
		data(){
			return{
				audioTitle:"",
				author:"",
				format:"",
				showBlack:false,
				showText:false,
				textInfo:{},
				openAddProd:false,
				origin:"add",
				isSearchVideo:false,
				showVideo:false,
				playInfo:{},
				allVideoList:[],
				currentVideoList:[],
				searchVideoList:[],
				messageText:"",
				messageType:"",
				pageSize:7,
				currentPageNum:1,
				searchVideoContent:""
			}
		},
		computed:{
			addVideo(){
				return (
				        this.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
				        this.user.status === "d630fbb5fd6026ccb4af0eb68d3"
				      );
			},
			pagenationContent() {
				return this.currentVideoList.filter((item, index) => {
					return index > (this.currentPageNum - 1) * this.pageSize - 1 && 
					index <= (this.currentPageNum - 1) * this.pageSize - 1 + this.pageSize;
				});
			},
			currentSearchVideoList(){
				return this.searchVideoList.filter((item,index)=>{
					return index <=7
				})
			},
			allPageSize(){
				return this.allVideoList.length
			}
		},
		methods:{
			readyDelProd(){
				
			},
			againGetProdList(){
				this.getAllVideoList()
			},
			changePagenation(current) {
				console.log(current);
				this.currentPageNum=current.type==="next"?this.currentPageNum+1:this.currentPageNum-1
			},
			disappealAddProd(){
				uni.reLaunch({
					url:"/pages/prod/prod"
				})
			},
			addYourVideo(){
				this.openAddProd = true
				setTimeout(()=>{
					this.$refs.addProd.In()
				})
			},
			cancel(){
				this.searchVideoContent = ""
				this.getAllVideoList()
			},
			chooseBlogForSearch(item){
				this.searchVideoContent = item.title
				this.startSearchVideo()
			},
			searchAllVideo(){
				//聚焦时触发
				this.searchVideoList = this.allVideoList
				this.isSearchVideo = true
			},
			cancelSearchAllVideo(){
				//不聚焦的时候触发
				this.isSearchVideo = false
			},
			startSearchVideo(){
			 uni.request({
			 	url:"https://www.ttzxh.icu:443/api/prod/chooseSearch",
			 	data:{
			 		searchTitle:this.searchVideoContent
			 	},
			 	success: (res) => {
			 		console.log(res)
			 		if(res.data.error===-1){
			 			this.currentVideoList = res.data.data
			 		}else{
			 			this.currentVideoList = []
			 		}
			 	},
			 	fail: (res) => {
			 		this.currentVideoList = this.allVideoList
			 	}
			 })
			},
			changeSearchVideo(){
				uni.request({
					url:"https://www.ttzxh.icu:443/api/prod/chooseSearch",
					data:{
						searchTitle:this.searchVideoContent
					},
					success: (res) => {
						console.log(res)
						if(res.data.error===-1){
							this.searchVideoList = res.data.data
						}else{
							this.searchVideoList = [{title:"没有找到(⊙o⊙)？"}]
						}
					},
					fail: (res) => {
						this.searchVideoList = this.allVideoList
					}
				})
			},
			closeVideo(){
				this.fadeOutScale()
				setTimeout(()=>{
					this.showVideo = false
					this.showText = false
					this.showBlack = false
				},300)
			},
			playVideo(playItem){
				this.fadeInScale()
				this.audioTitle = playItem.title
				this.author = playItem.username
				this.showVideo = true
				this.format = playItem.format
				this.showBlack = true
				this.playInfo = playItem
			},
			readText(textItem){
				this.fadeInScale()
				this.showText = true
				this.showBlack = true
				this.textInfo = textItem
			},
			confirm(done){
				
			},
			close(done){
				done()
			},
			open() {
				this.$refs.popup.open();
			},
			openDia(){
				this.$refs.popupdia.open()
			},
			getAllVideoList() {
				uni.request({
					url:"https://www.ttzxh.icu:443/api/prod/search",
					success: (res) => {
						console.log(res)
						console.log("-------------------")
					  if(res.data.error===-1){
							let video = res.data.data
							this.allVideoList = video
							this.currentVideoList = video
							this.searchVideoList = video
						}else{
							this.allVideoList = []
							this.currentVideoList = []
							this.searchVideoList = []
						}
					},
					fail: () => {
						//失败回调
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.prod{
		.BG{
			width: 100%;
			height: 100vh;
			background-image: url(../../static/img/xiunv4.jpg);
			background-size: cover;
			position: fixed;
			z-index: -1;
			top: 0px;
			opacity: 0.5;
		}
		video{
			width: 90%;
			height: 40vh;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 50px;
			right: 0;
			margin: auto;
			z-index: 12;
		}
		.audio{
			width: 100%;
			display: flex;
			justify-content: center;
			position: fixed;
			left: 0;
			height: 65px;
			top: 0;
			bottom: 50px;
			right: 0;
			margin: auto;
			z-index: 12;
		}
		
		.openText{
			box-sizing: border-box;
			width: 90%;
			height: 70vh;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 50px;
			right: 0;
			margin: auto;
			z-index: 12;
			background-color: #fff;
			overflow-y: scroll;
			padding: 5px 15px;
			.realname{
				color: #D1D5DA;
				margin: 15px;
			}
			h1{
				margin-left: 30px;
				margin-bottom: 10px;
			}
			.content{
				padding-top: 10px;
			}
		}
		.video{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: 10;
			background-color: rgba($color: #000000, $alpha: .5);
			
			.closeVideo{
				position: fixed;
				right: 50px;
				top: 50px;
				font-size: 40px;
				z-index: 11;
				color: #fff;
				&:active{
					color: red;
				}
			}
		}
		.addVideo{
			box-sizing: border-box;
			display: flex;
			width: 680upx;
			margin: 10px 35upx;
			height: 50px;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			padding: 5px 15px;
			background-color: rgba($color: #fff, $alpha: 0.3);
			&:active{
				background-color: rgba($color: #C7DEFF, $alpha: 0.3)
				
			}
			.addVideoText{
				
			}
			.tag{
				
			}
		}
		.input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			margin-top: 55px;
			width: 100%;
			height: 50px;
			input{
				width: 480upx;
				height: 30px;
				background-color: #C8C7CC;
				border-radius: 40px;
				padding: 5px 10px 5px 40px;
				margin-left: 20px;
			}
			.cancel{
				margin: 0 12px;
			}
			i{
				position: absolute;
				margin: auto;
					left:34px;
				
			}
		}
		.contain{
			margin-top: 15px;
		}
		.pagenation{
			display: flex;
			justify-content: center;
		}
		.search{
			top: 115px;
			left:25px;
			width: 550upx;
		}
	}
</style>
